<template>
  <div class="energyPonsump">
    <stitle :bg="bg" text="能耗趋势分析" :type="0" />
    <!-- <div class="tablecon">
      <el-table :data="tableData" style="width: 100%" height="180px">
        <el-table-column prop="name" label="设备名" width="70px">
        </el-table-column>
        <el-table-column prop="kc" label="用水量" width="70px">
        </el-table-column>
        <el-table-column prop="pd" label="用电量" width="70px">
        </el-table-column>
        <el-table-column prop="ck" label="用气量" width="70px">
        </el-table-column>
        <el-table-column prop="peo" label="记录人员" width="80px">
        </el-table-column>
      </el-table>
    </div> -->
    <!-- <div id="echartEnergy"></div> -->
    <el-row :gutter="20" style="margin-left: 16px">
      <el-col :span="4">
        <img
          width="62px"
          height="61px"
          src="../../assets/images/modelimg/y2.png"
        />
      </el-col>
      <el-col :span="10" style="padding-left: 33px">
        <span style="color: #1eecff; font-size: 17px">8558</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >当月用水</span
        >
      </el-col>
      <el-col :span="10" style="padding-left: 15px">
        <span style="color: #1eecff; font-size: 17px">554</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >上期同期</span
        >
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-left: 16px">
      <el-col :span="4">
        <img
          width="62px"
          height="61px"
          src="../../assets/images/modelimg/y3.png"
        />
      </el-col>
      <el-col :span="10" style="padding-left: 33px">
        <span style="color: #1eecff; font-size: 17px">8558</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >蒸汽使用量</span
        >
      </el-col>
      <el-col :span="10" style="padding-left: 15px">
        <span style="color: #1eecff; font-size: 17px">13764</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >上期同期</span
        >
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-left: 16px">
      <el-col :span="4">
        <img
          width="62px"
          height="61px"
          src="../../assets/images/modelimg/d.png"
        />
      </el-col>
      <el-col :span="10" style="padding-left: 33px">
        <span style="color: #1eecff; font-size: 17px">458</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >亿kw</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >用电量</span
        >
      </el-col>
      <el-col :span="10" style="padding-left: 15px">
        <span style="color: #1eecff; font-size: 17px">13764</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >亿kw</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >上期同期</span
        >
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-left: 16px">
      <el-col :span="4">
        <img
          width="62px"
          height="61px"
          src="../../assets/images/modelimg/q1.png"
        />
      </el-col>
      <el-col :span="10" style="padding-left: 33px">
        <span style="color: #1eecff; font-size: 17px">458</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >天然气使用量</span
        >
      </el-col>
      <el-col :span="10" style="padding-left: 15px">
        <span style="color: #1eecff; font-size: 17px">554</span
        ><span
          style="
            color: #fff;
            margin-left: 33px;
            position: relative;
            top: 10px;
            font-size: 17px;
          "
          >吨</span
        >
        <span
          style="color: #fff; font-size: 17px; margin-top: 5px; display: block"
          >上期同期</span
        >
      </el-col>
    </el-row>
    <stitle :bg="bg" text="能耗排名" :type="0" />
    <el-row :gutter="20" style="position: relative; left: 150px">
      <el-col :span="8">
        <el-select size="mini" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in select"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select size="mini" v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in select1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <span style="font-size: 13px; color: #fff; float: right; margin-top: 10px"
      >单位（亿千瓦）</span
    >
    <el-row :gutter="20">
      <el-col :span="3">
        <ul class="toplist">
          <li>
            <span class="tl3top">top1</span>
          </li>
          <li>
            <span class="tl3top">top2</span>
          </li>
          <li>
            <span class="tl3top">top3</span>
          </li>
          <li>
            <span class="tleltop">top4</span>
          </li>
          <li>
            <span class="tleltop">top5</span>
          </li>
        </ul>
      </el-col>
      <el-col :span="21">
        <div id="eph"></div>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="4">
        <span  class="tl3top"
          >top1</span
        >
      </el-col>
      <el-col :span="20">
        <span style="font-size: 18px; color: #fff">油墨事业部一车间</span>
        <span style="font-size: 13px; color: #fff; float: right"
          >单位（亿千瓦）</span
        >
        <el-progress
          :percentage="percentage"
          class="top1"
          :stroke-width="16"
          :format="format"
        ></el-progress>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <span class="tl3top"
          >top2</span
        >
      </el-col>
      <el-col :span="20">
        <span style="font-size: 18px; color: #fff">油墨事业部一车间</span>
        <el-progress
          :percentage="percentage1"
          class="top1"
          :stroke-width="16"
          :format="format"
        ></el-progress>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <span class="tl3top"
          >top3</span
        >
      </el-col>
      <el-col :span="20">
        <span style="font-size: 18px; color: #fff">油墨事业部一车间</span>
        <el-progress
          :percentage="percentage2"
          class="top1"
          :stroke-width="16"
          :format="format"
        ></el-progress>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <span class="tleltop"
          >top4</span
        >
      </el-col>
      <el-col :span="20">
        <span style="font-size: 18px; color: #fff">污水站消防泵房</span>
        <el-progress
          :percentage="percentage3"
          class="top2"
          :stroke-width="16"
          :format="format"
        ></el-progress>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <span class="tleltop"
          >top5</span
        >
      </el-col>
      <el-col :span="20">
        <span style="font-size: 18px; color: #fff">制氮机（公用设备）</span>
        <el-progress
          :percentage="percentage4"
          class="top2"
          :stroke-width="16"
          :format="format"
        ></el-progress>
      </el-col>
    </el-row> -->
    <stitle :bg="bg" text="能耗异常统计" :type="0" />
    <div class="tablecon">
      <el-table :data="tableData1" style="width: 100%" height="180px">
        <el-table-column prop="name" label="部门名称" width="80px">
        </el-table-column>
        <el-table-column prop="kc" label="耗电量" width="80px">
        </el-table-column>
        <el-table-column prop="pd" label="统计人员" width="100%">
        </el-table-column>
        <el-table-column prop="ck" label="异常原因" width="100%">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "energyPonsump",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      tableData: [
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "设备1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
      ],
      tableData1: [
        {
          name: "xxxxxx ",
          kc: "89kw",
          pd: "李明",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "43kw",
          pd: "王晓丽",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "89kw",
          pd: "赵红",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "43kw",
          pd: "王晓丽",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "89kw",
          pd: "赵红",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "43kw",
          pd: "王晓丽",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "89kw",
          pd: "赵红",
          ck: "xxxxxx",
        },
        {
          name: "xxxxxx ",
          kc: "43kw",
          pd: "王晓丽",
          ck: "xxxxxx",
        },
      ],
      edata: [
        { value: 40, name: "设备一" },
        { value: 18, name: "设备二" },
        { value: 22, name: "设备三" },
      ],
      select: [
        {
          value: "0",
          label: "所有年份",
        },
        {
          value: "1",
          label: "当年",
        },
      ],
      value: "0",
      select1: [
        {
          value: "0",
          label: "用电量",
        },
        {
          value: "1",
          label: "用电量",
        },
      ],
      value1: "0",
      percentage: 90,
      percentage1: 80,
      percentage2: 70,
      percentage3: 60,
      percentage4: 45,
      bgred: `url("../../assets/images/modelimg/rb.png")`,
    };
  },
  methods: {
    setEchart() {
      const _echarts = this.$echarts.init(
        document.getElementById("echartEnergy")
      );
      const option = {
        tooltip: {
          trigger: "item",
        },
        title: [
          {
            text: "用水量",
            left: "left",
            top: 20,
            textStyle: {
              color: "#AB83EE",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
          {
            text: "用电量",
            left: 200,
            top: 20,
            textStyle: {
              color: "#5769C6",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
          {
            text: "用气量",
            left: "left",
            top: 180,
            textStyle: {
              color: "#5F98E7",
              fontSize: 14,
              fontFamily: "ZZGFLQ",
              fontStyle: "oblique",
            },
          },
        ],
        legend: {
          itemWidth: 15,
          itemHeight: 10,
          bottom: "0px",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        color: ["#AB83EE", "#5769C6", "#5F98E7"],
        series: [
          {
            type: "pie",
            radius: [0, 45],
            center: ["28%", "25%"],
            itemStyle: {
              normal: {
                labelLine: {
                  length: 1,
                },
              },
            },
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [35, 45],
            center: ["70%", "25%"],
            itemStyle: {
              normal: {
                labelLine: {
                  length: 1,
                },
              },
            },
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [25, 55],
            roseType: "area",
            center: ["45%", "65%"],
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 12,
                  },
                },
              },
            },
            data: this.edata,
          },
        ],
      };
      _echarts.setOption(option);
    },
    format(percentage) {
      return percentage * 210;
    },
    setechar1t() {
      let that = this;
      const _echarts = this.$echarts.init(document.getElementById("eph"));
      var charts = {
        // 按顺序排列从大到小
        cityList: [
          "油墨事业部一车间",
          "油墨事业部一车间",
          "油墨事业部一车间",
          "污水站消防泵房",
          "制氮机（公用设备）",
        ],
        cityData: [7500, 6200, 5700, 4200, 3500],
      };
      var top10CityList = charts.cityList;
      var top10CityData = charts.cityData;
      var color = [
        "rgba(245,92,87",
        "rgba(245,92,87",
        "rgba(245,92,87",
        "rgba(27,218,255",
        "rgba(27,218,255",
      ];

      let lineY = [];
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i;
        if (x > color.length - 1) {
          x = color.length - 1;
        }
        var data = {
          name: charts.cityList[i],
          color: color[x] + ")",
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new that.$echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[x] + ", 0.2)",
                  },
                  {
                    offset: 1,
                    color: color[x] + ", 1)",
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
        };
        lineY.push(data);
      }

      console.log(lineY);
      let option = {
        // backgroundColor: "#000",
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          borderWidth: 0,
          top: "5%",
          left: "5%",
          right: "15%",
          bottom: "3%",
        },
        color: color,
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                color: "#fff",
                fontSize: "18",
                fontFamily: "PingFangSC-Regular",
              },
              formatter: function (val, index) {
                 var params = top10CityData[top10CityData.length-1 - index] +"";
          var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 4; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: top10CityData,
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            zlevel: 2,
            barWidth: "15px",
            data: lineY,
            animationDuration: 1500,
            label: {
              normal: {
                color: "#fff",
                show: true,
                position: [0, "-24px"],
                textStyle: {
                  fontSize: 18,
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
        ],
        animationEasing: "cubicOut",
      };
      _echarts.setOption(option);
    },
  },
  mounted() {
    // this.setEchart();
    this.setechar1t();
  },
  computed: {},
};
</script>

<style lang="scss"  scoped>
.energyPonsump {
  width: 100%;
  padding-right: 70px;
  box-sizing: border-box;
  #echartEnergy {
    width: 100%;
    height: 400px;
  }
  #eph {
    width: 320px;
    height: 300px;
  }
  /deep/ .el-progress-bar {
    width: 90%;
  }
  /deep/ .el-progress__text {
    color: #fff;
  }
  /deep/ .el-progress-bar__outer {
    border-radius: 6px;
  }
  .top1 /deep/ .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, white, #f55c57);
  }
  .top2 /deep/ .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, white, #98eeff);
  }
  .tl3top {
    background-image: url("../../assets/images/modelimg/rb.png");
    font-size: 18px;
    color: #fff;
  }
  .tleltop {
    background-image: url("../../assets/images/modelimg/bb.png");
    font-size: 18px;
    color: #fff;
  }
  /deep/ .el-select .el-input__inner {
    background-image: url("../../assets/images/modelimg/slb.png");
  }
  /deep/ .el-input__inner {
    background-color: unset;
    border: unset;
    color: #fff;
  }
  .toplist {
    margin-top: 50px;
    margin-left: 20px;
    li {
      margin: 32px 0;
    }
  }
}
</style>